<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside :width="sidebarWidth" class="sidebar" :class="{ 'is-collapsed': isCollapsed }">
      <Sidebar :is-collapsed="isCollapsed" />
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        <Header @toggle-collapse="toggleCollapse" />
      </el-header>

      <!-- 主内容 -->
      <el-main>
        <!-- 标签页导航 -->
        <div class="tabs-container">
          <Tabs />
        </div>
        
        <!-- 页面内容 -->
        <div class="page-content">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'
import Tabs from './components/Tabs.vue'

// 侧边栏折叠状态
const isCollapsed = ref(false)

// 侧边栏宽度
const sidebarWidth = computed(() => {
  return isCollapsed.value ? '64px' : '200px'
})

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100vh;
}

.sidebar {
  background-color: #304156;
  transition: width 0.3s ease;
  overflow: hidden;

  &.is-collapsed {
    width: 64px !important;
  }
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  height: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-main {
  background-color: #f5f5f5;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tabs-container {
  background-color: #fff;
  padding: 8px 12px 0;
  border-bottom: 1px solid #e6e6e6;
}

.breadcrumb-container {
  background-color: #fff;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.page-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>
